import { defineComponent, onMounted, ref } from 'vue';
import {
  RegionTrendAPI,
  GetCompanyCntAPI,
  IncreaseTrendAPI,
  CompanyRankAPI,
  PatentTrendAPI,
} from '@/service/api/IndustryViewAPI';
import { IndustryRankMap } from '@config/map';
import CompanyCnt from './CompanyCnt';
import CompanyTrend from './CompanyTrend';
import IndustryPatentTrend from './IndustryPatentTrend';
import RegionRank from './RegionRank';
import CompanyRank from './CompanyRank';
import './style.scss';

const maxHeight = 180; // 地图上柱子的最大高度

export default defineComponent({
  name: 'IndustryView',
  setup() {
    const IndustryName = sessionStorage.getItem('IndustryName') || '生物产业';
    const districtRankData: any = ref([]);
    const companyCntData: any = ref();
    const companyTrendData: any = ref({});
    const companyRankData: any = ref({});
    const patentTrendData: any = ref({});

    onMounted(async () => {
      const currentYear = new Date().getFullYear(); // 当前年份 如:2021
      const seic_lv1_code = IndustryRankMap?.find((i) => i.name === IndustryName)?.seic_lv1_code;

      const filter = {
        region: {
          province: '江苏省',
          city: '苏州市',
          district: null,
        },
        seic_lv1_code,
      };

      const reg_date = {
        start: currentYear - 20 + '-01-01',
        end: currentYear + '-12-31',
      };

      [
        districtRankData.value,
        companyCntData.value,
        companyTrendData.value,
        companyRankData.value,
        patentTrendData.value,
      ] = await Promise.all([
        RegionTrendAPI({
          filter,
          groupby: ['district'],
          aggregate: {
            district: 'count',
          },
        }),
        GetCompanyCntAPI({
          filter: {
            ...filter,
          },
          groupby: ['seic_lv1'],
          aggregate: {
            seic_lv1_code: 'count',
          },
        }),
        IncreaseTrendAPI({
          filter: {
            ...filter,
            reg_date,
          },
        }),
        CompanyRankAPI({
          filter: {
            ...filter,
          },
          fields: ['company_id', 'company_name'],
          order: {
            order_field: 'score',
            order_type: 'desc',
          },
          start: 1,
          rows: 10,
        }),
        PatentTrendAPI({
          filter: {
            ...filter,
            reg_date,
          },
        }),
      ]);
    });

    return { IndustryName, districtRankData, companyCntData, companyTrendData, companyRankData, patentTrendData };
  },

  render() {
    const heightUnit = maxHeight / Math.max(...this.districtRankData.map((d) => d.value));

    return (
      <div id="IndustryView">
        {/* 地图柱子 */}
        <ul>
          {this.districtRankData.map((d) => {
            const noValue = d.value < 0;
            const pillarHeight = noValue ? 0 : d.value * heightUnit;

            return (
              <li style={{ top: `${d.top - pillarHeight}px`, left: `${d.left}px` }}>
                {!noValue && (
                  <>
                    <div style={{ height: `${pillarHeight}px` }}>
                      <section>
                        <aside>No.{noValue ? '-' : d.rank}</aside>
                        <aside>
                          {noValue ? '-' : d.value}
                          <span>家</span>
                        </aside>
                      </section>
                    </div>
                    <img src={require('@assets/bg_point.png')}></img>
                  </>
                )}
              </li>
            );
          })}
        </ul>

        <main>
          <aside>
            {/* 企业增长趋势 */}
            <CompanyTrend name={this.IndustryName} data={this.companyTrendData}></CompanyTrend>
            {/* 产业全景 - 专利增长趋势 */}
            <IndustryPatentTrend name={this.IndustryName} data={this.patentTrendData}></IndustryPatentTrend>
          </aside>

          {/* 企业数 */}
          <CompanyCnt name={this.IndustryName} data={this.companyCntData}></CompanyCnt>

          <aside>
            {/* 区域排名 */}
            <RegionRank data={this.districtRankData}></RegionRank>
            {/* 公司排名 */}
            <CompanyRank name={this.IndustryName} data={this.companyRankData}></CompanyRank>
          </aside>
        </main>
        <footer></footer>
      </div>
    );
  },
});
